<template>
	<view>
		<!-- 头部导航栏 -->
		<view class="heads">
			<text @tap="clickEvent1" :class="this.index == 1? 'line':''">精选文章</text>

			<text @tap="clickEvent2" :class="this.index == 2? 'line':''">品牌列表</text>
		</view>
		<!-- 照片展示区 -->
		<view class="box1" v-show="current == 'box1'" v-for="item in text" :key="item.id">
			<image :src="item.coverImg">

			</image>
			<view class="box1-text">{{item.title}}</view>
			<view class="box1-text2">{{item.summary}}</view>
			<view class="box1-icon">
				<uni-icons type="eye-filled" size="20"></uni-icons><text>{{item.viewCount}}</text>
			</view>
			<view class="box1-icon2">
				<uni-icons type="star" size="20"></uni-icons><text></text>
			</view>

		</view>
		<view class="box2" v-show="current !='box1'" v-for="item in list" :key="item.id">
			<image :src="item.bigPic"></image>
			<view class="box2-text">{{item.name}}</view>
			<view class="box2-text2">{{item.brandStory}}</view>
		</view>
		<!-- 尾巴 -->
	</view>
</template>

<script>
	import {
		findArticleByPage,
		findBrandsByPage

	} from "@/api/find/index.js"
	export default {
		data() {
			return {
				current: "box1",
				index: 1,
				start: 1,
				limit: 10,
				text: [],
				list: [],


			};
		},
		methods: {
			clickEvent1() {
				this.current = "box1"
				this.index = 1
			},
			clickEvent2() {
				this.current = "box2",
					this.index = 2
			}
		},
		onLoad() {
			findBrandsByPage(this.start, this.limit)
				.then(res => {
					console.log(res)
					this.list = res.data.data.rows
				}),
				findArticleByPage(this.start, this.limit)
				.then(res => {
					console.log(res)
					this.text = res.data.data.rows

				})
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: red;
	}

	.heads {
		width: 100%;
		height: 50px;
		background-color: #354E44;
		text-align: center;

		text {
			color: #FFFFFF;
			line-height: 50px;
		}

		text:nth-child(2) {
			margin-left: 20px;
		}

	}

	.box1 {
		padding-top: 30px;
		position: relative;

		image {
			display: block;
			margin: 0 auto;
			border-radius: 16px;


		}

		.box1-text {
			position: absolute;
			bottom: 50px;
			left: 50px;
			font-size: 18px;
			color: #FFFFFF;
		}

		.box1-text2 {
			position: absolute;
			bottom: 30px;
			left: 50px;
			font-size: 14px;
			color: #FFFFFF;
		}

		.box1-icon {
			position: absolute;
			bottom: -20px;
			left: 50px;
		}

		.box1-icon2 {
			position: absolute;
			bottom: -20px;
			right: 50px;
		}
	}

	.box2 {
		padding: 20px 30px;
	}

	.line {
		border-bottom: 2px #FFFFFF solid;

	}
</style>
